import {Button, Space, Table, TableProps} from "antd";
import React, {useEffect} from "react";
import {CefQueryCfg} from "../message/CefQueryCfg";
import {CefKey} from "../message/CefKey.Const";
import {sendCefQuery} from "../message/cefQueryHandler";
import {useAppContext} from "../utils/Context";
import {SESSION_STORAGE_SEARCH_FORM} from "./MainPage";
import {useNavigate} from "react-router-dom";

export type SqlStatementType = {
    id: number,
    name: string,
    sql: string
};
export const SqlPage: React.FC = () => {
    const {sqlStatements, setSqlStatements} = useAppContext();
    const navigate = useNavigate();
    const deleteSqlStatement = (data: SqlStatementType) => {
        const cfg = new CefQueryCfg(CefKey.SQL_STATEMENT);
        cfg.data = {
            method: 'delete',
            params: {id: data.id}
        }
        sendCefQuery(cfg, (response) =>
            getSqlStatementList()
        );
    }
    const executeSqlStatement = (data: SqlStatementType) => {
        const sessionData = sessionStorage.getItem(SESSION_STORAGE_SEARCH_FORM);
        let newData;
        if (sessionData) {
            newData = {...JSON.parse(sessionData), sql: data.sql};
        } else {
            newData = {sql: data.sql};
        }
        sessionStorage.setItem(SESSION_STORAGE_SEARCH_FORM, JSON.stringify(newData));
        navigate('/mainPage');

    }
    const getSqlStatementList = () => {
        const cfg = new CefQueryCfg(CefKey.SQL_STATEMENT);
        cfg.data = {
            method: 'get',
            params: {}
        }
        sendCefQuery(cfg, (response) => setSqlStatements(JSON.parse(response).body));
    }
    useEffect(() => {
        getSqlStatementList();
    }, []);
    const columns: TableProps<SqlStatementType>['columns'] = [
        {
            title: '功能',
            dataIndex: 'name',
            key: 'name',
            width: '30%',
            ellipsis: true
        },
        {
            title: 'sql',
            dataIndex: 'sql',
            key: 'sql',
            width: '50%',
            ellipsis: true
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (_, data) =>
                <Space size="middle">
                    <Button onClick={() => executeSqlStatement(data)}>执行</Button>
                    <Button onClick={() => deleteSqlStatement(data)}>删除</Button>
                </Space>,
            width: '20%'
        },
    ];
    return (
        <Table columns={columns} dataSource={sqlStatements} rowKey="id"></Table>
    );
}

export function addSqlStatement(name: string, sql: string, onSuccess: (response: string) => void) {
    const cfg = new CefQueryCfg(CefKey.SQL_STATEMENT);
    cfg.data = {
        method: 'add',
        params: {
            name, sql
        }
    }
    sendCefQuery(cfg, onSuccess);
}

export const getSqlStatements = (onSuccess: (response: string) => void): void => {
    const cfg = new CefQueryCfg(CefKey.DATASOURCE);
    cfg.data = {
        method: 'get',
        params: {}
    }
    sendCefQuery(cfg, onSuccess);
}